<script lang="ts" setup>
import MyDialog from "../MyDialog.vue";

interface Props {
	show: boolean;
	options: { value: string; label: any }[];
}
const props = withDefaults(defineProps<Props>(), {});
const emits = defineEmits<{
	(e: "close"): void;
	(e: "select", value: any): void;
}>();
</script>

<template>
	<MyDialog :show="props.show" @close="emits('close')">
		<menu class="dialog" @click.stop>
			<button v-for="v in props.options" :key="v.value" @click="emits('select', v.value)">{{ v.label }}</button>
		</menu>
	</MyDialog>
</template>

<style lang="scss" scoped>
.dialog {
	padding: 30rem;
	width: 50vw;
	height: 50vh;
	background-color: #fff;
	border-radius: 10rem;
	display: flex;
	flex-direction: column;
	overflow: auto;
	row-gap: 10rem;
	button {
		font-size: 20rem;
		background-color: transparent;
		border-radius: 4rem;
		border: 1rem solid #999;
	}
}
</style>
